<!-- // TODO -->
<script lang="ts" setup>
import {
  AlipayCircleOutlined,
  GithubOutlined,
  LockOutlined,
  MobileOutlined,
  QqOutlined,
  UserOutlined,
  WechatOutlined,
} from '@vicons/antd'
import { useMobileLogin } from './composables/mobile-login.ts'
import { useAccountLogin } from './composables/account-login.ts'
import { BlankLayout } from '@/layouts'

const { formRef, model, rules, loading, login } = useAccountLogin()

const {
  mModel,
  mFormRef,
  mRules,
  mLoading,
  counterDownState,
  counter,
  mLogin,
  sendCode,
} = useMobileLogin()
</script>

<template>
  <BlankLayout>
    <div class="py-20px items-center justify-center" flex="~ col">
      <div class="flex items-center">
        <img alt="" class="h-40px w-40px" src="@/assets/vue.svg">
        <span class="ml-3 text-33px font-800">Ellwood Admin Pro</span>
      </div>
      <div class="flex items-center mt-12px mb-40px text-[var(--text-color-3)]">
        {{ $t('login.admin.desc') }}
      </div>
    </div>
    <div class="w-350px mx-auto">
      <n-tabs
        default-value="username"
        justify-content="space-evenly"
        size="large"
        type="line"
      >
        <n-tab-pane :tab="$t('login.account.tab')" name="username">
          <n-form
            ref="formRef"
            :model="model"
            :rules="rules"
            label-align="left"
            label-placement="left"
          >
            <n-form-item-row path="username">
              <n-input
                v-model:value="model.username"
                :placeholder="$t('login.username.placeholder')"
              >
                <template #prefix>
                  <n-icon :component="UserOutlined" />
                </template>
              </n-input>
            </n-form-item-row>
            <n-form-item-row path="password">
              <n-input
                v-model:value="model.password"
                :placeholder="$t('login.password.placeholder')"
                show-password-on="click"
                type="password"
              >
                <template #prefix>
                  <n-icon :component="LockOutlined" />
                </template>
              </n-input>
            </n-form-item-row>
            <n-form-item-row path="rememberMe">
              <div class="w-100% flex items-center justify-between">
                <n-checkbox v-model:value="model.rememberMe">
                  {{ $t('login.remember-me') }}
                </n-checkbox>
                <a class="cursor-pointer text-[var(--text-color-3)]">
                  {{ $t('login.forgot-password') }}
                </a>
              </div>
            </n-form-item-row>
          </n-form>
          <n-button
            :loading="loading"
            block
            secondary
            strong
            type="primary"
            @click="login"
          >
            {{ $t('login.login') }}
          </n-button>
        </n-tab-pane>
        <n-tab-pane :tab="$t('login.mobile.tab')" name="mobile">
          <n-form
            ref="mFormRef"
            :model="mModel"
            :rules="mRules"
            label-align="left"
            label-placement="left"
          >
            <n-form-item-row path="mobile">
              <n-input
                v-model:value="mModel.mobile"
                :placeholder="$t('login.mobile.placeholder')"
              >
                <template #prefix>
                  <n-icon :component="MobileOutlined" />
                </template>
              </n-input>
            </n-form-item-row>
            <n-form-item-row path="code">
              <n-input-group>
                <n-input
                  v-model:value="mModel.code"
                  :placeholder="
                    $t('login.mobile.verification-code.placeholder')
                  "
                >
                  <template #prefix>
                    <n-icon :component="LockOutlined" />
                  </template>
                </n-input>
                <n-button :disabled="counterDownState" @click="sendCode">
                  {{
                    counterDownState
                      ? `${counter}s${$t('login.mobile.resend')}`
                      : $t(
                        'login.mobile.verification-code.get-verification-code',
                      )
                  }}
                </n-button>
              </n-input-group>
            </n-form-item-row>
            <n-form-item-row path="rememberMe">
              <div class="w-100% flex items-center justify-between">
                <n-checkbox v-model:value="mModel.rememberMe">
                  {{ $t('login.remember-me') }}
                </n-checkbox>
                <a class="cursor-pointer text-[var(--primary-color)]">
                  {{ $t('login.forgot-password') }}
                </a>
              </div>
            </n-form-item-row>
          </n-form>
          <n-button
            :loading="mLoading"
            block
            secondary
            strong
            type="primary"
            @click="mLogin"
          >
            {{ $t('login.login') }}
          </n-button>
        </n-tab-pane>
      </n-tabs>
      <div class="flex mt-24px items-center">
        {{ $t('login.sign-in-with') }}
        <n-icon
          :component="GithubOutlined"
          class="cursor-pointer text-[var(--text-color-3)] hover:text-[var(--primary-color)]"
          size="24"
        />
        <n-icon
          :component="WechatOutlined"
          class="cursor-pointer text-[var(--text-color-3)] hover:text-[var(--primary-color)] ml-2"
          size="28"
        />
        <n-icon
          :component="AlipayCircleOutlined"
          class="cursor-pointer text-[var(--text-color-3)] hover:text-[var(--primary-color)] ml-2"
          size="28"
        />
        <n-icon
          :component="QqOutlined"
          class="cursor-pointer text-[var(--text-color-3)] hover:text-[var(--primary-color)] ml-2"
          size="28"
        />
      </div>
    </div>
  </BlankLayout>
</template>

<style scoped></style>
